<template>
  <el-row style="margin-top: 15px">
    <el-col :span="12">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="(banner,index) in banner" :key="index">
          <el-image style="height: 300px" :src="banner" @click="toGoodsView(index+1)"/>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col :span="12">
      <el-form :model="user"  class="loginForm">
        <h1>用户登录</h1>
        <el-form-item>
          <el-input v-model="user.username"  prefix-icon="User" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.password" type="password" placeholder="请输入密码" prefix-icon="Key" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.captchaInput" placeholder="请输入验证码" prefix-icon="Picture" style="width: 175px;margin-right: 5px"/>
          <el-image :src="imageBase64Data" @click="getCaptcha"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="loginBtn" @click="login" >登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useTokenStore} from "@/stores/token.js";
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()
const tokenStore = useTokenStore();
const router = useRouter();

const banner = ref([
  "/src/assets/banner/banner1.png",
  "/src/assets/banner/banner2.png",
  "/src/assets/banner/banner3.png"
])
//保存验证码
const imageBase64Data = ref('')
//注册用户信息
const user = ref({
  username:null,
  password:null,
  captchaInput:null,
  key:null
})

//跳转到商品详情页面
function toGoodsView(id){
  router.push({
    path:'/user/goods', //跳转到的位置，值和页面路由种的配置的路径相同
    query:{
      id
    }
  });
}
//登录
function login(){
  userApi.login(user.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage({
            message: resp.msg,
            type: 'success',
            duration: 1500
          })
          //保存token
          tokenStore.updateToken(resp.data)
          //获取用户信息
          getInfo();
          //跳转到前台首页
          router.push("/user/index");
        } else {
          ElMessage({
            message: resp.msg,
            type: 'error',
            duration: 1500
          });
        }
      })
}

//获取验证码
function getCaptcha(){
  userApi.captcha()
      .then(resp => {
        imageBase64Data.value = resp.data.imageBase64Data;
        user.value.key = resp.data.key;
      });
}
//获取用户信息
function getInfo(){
  userApi.getInfo()
      .then(resp => {
        if(resp.code == 10000){
          //将已登录的用户信息保存在pinia中
          userStore.updateUser(resp.data)
        }


      })
}

getCaptcha();
</script>

<style scoped>
.loginForm{
  width: 300px;
  margin: 45px 100px;
}
.loginForm h1{
  text-align: center;
  margin-bottom: 20px;
}
.loginBtn{
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>